<template>
	<view class="container">
		<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">个人资料</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell m-t b-b" @click="clearCache()" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">清除缓存</text>
			<text style="color: #976bf8; font-size: 30upx;">{{storageCurrentSize}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="smallUpgrade(true)" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">检查更新</text>
			<text class="tip" v-if="redSpot == 1">NEW</text>
			<text class="tip-text" v-if="redSpot == 1">有新的版本</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="aboutUs()" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">关于我们</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="log-out-btn " @click="toLogout" hover-class="cell-hover" :hover-stay-time="50">
			<view class="cell-tit">退出登录</view>
		</view>
		<view class="" style="position: absolute; bottom:140upx; left: 0; right: 0; margin: auto;">
			<view class="footer">
				该APP版权
				
			</view>
			<view class="footer">
				高波王亚辉所有
			</view>
		</view>
		
		<tip></tip>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	    
	
	export default {
		data() {
			return {
				storageCurrentSize: '0 KB',
				isUpgrade:false,// 是否显示升级
				redSpot:0,// 0不显示红点，1显示
				flag:false,// 防抖

			}
		},
		onLoad(options) {
			this.fetchStorageSize()
		},
		methods:{
			...mapMutations(['logout']),
			// 关于我们
			aboutUs(){
				
			},
			/**
			 * 清除缓存按钮
			 */
			clearCache(){
				// 弹窗提示
				this.$showModal({content: `清除所有缓存？`}).then((data) => {
					// 获取所有缓存的key
					let list = this.$cache.getAllKeys();
					// 遍历数组，清除所有存在的缓存
					for (let key of list) {
						switch (key){
							case "user_info":
								break;
							default:
								this.$cache.removeCache(key);
								break;
						}
						
					}
					this.storageCurrentSize = '0 KB';
					// 操作成功弹窗提示
					this.$tip('清除成功',2)
				}).catch((reject) => {
					// 取消
				});
			},
			// 退出登录
			async outlogin(){
				try{
					const {
						data: { result, info}
					} = await this.$api.outlogin();
					if(result ==1 ){
						this.$tip('退出成功',2)
						this.logout()
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/public/login'
							})
						},1000)
						
					} else {
						this.$tip(info,2)
					}
				}catch(e){
					// console.log(e)
				}
			},
			//退出登录
			toLogout(){
				this.$showModal({content: '确定要退出登录么？'}).then((data) => {
					this.outlogin()
				}).catch((reject) => {
					// 取消
				});
				
			},
			// 获取缓存大小
			fetchStorageSize(){
				try {
				    const res = uni.getStorageInfoSync();
					// console.log(res)
					this.storageCurrentSize = this.$util.byteConvert(res.currentSize * 1024);
					// console.log(this.storageCurrentSize);
				} catch (e) {
				    // error
				}
			},
			
			

		}
	}
</script>

<style lang='scss'>
	page{
		background: #f5f5f5;
	}
	.container{
		padding-top: 20rpx;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 10upx 40rpx;
		line-height:70upx;
		position:relative;
		background: #fff;
		justify-content: center;
		align-items: center;
		border-bottom: 1px #F5F5F5 solid;
		&.log-out-btn{
			position: absolute;
			width: 100%;
			bottom:0;
			margin-top: 40upx;
			.cell-tit{
				color: #976bf8;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
		}
		.cell-more{
			align-self: baseline;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			margin-right:10upx;
		}
		.cell-tip{
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	.footer{
		font-size: 28upx;
		text-align: center;
		width: 100%;
		color: #CCCCCC;
	}
	.Agreementpolicy{
		position: absolute;
		bottom: 192upx;
		left: 0;
		right: 0;
		margin: 30upx auto;
		width: 80%;
		text-align: center;
	}
	.Agreementpolicy text{
		color: #976bf8;
		font-size: 30upx;
		padding: 10upx;
		text-decoration: underline;
	}
	.tip{
		height: 38rpx;
		font-size: 20rpx;
		background: #976bf8;
		color: #FFFFFF;
		border-radius: 30rpx;
		padding:  0 14rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tip-text{
		font-size: 28rpx;
		margin-left: 10rpx;
		line-height: 60rpx;
		color: #CCCCCC;
	}
	.log-out-btn{
		position: absolute;
		bottom: 0;
		right: 0;
		height: 90rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #976bf8;
		background: #FFFFFF;
	}
</style>
